<template>
	<div class="app-container">

		<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="88px">
			<el-form-item label="订单编号" prop="ddbh">
				<el-input v-model="queryParams.ddbh" placeholder="请输入订单编号" clearable size="small"
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item>
				<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-table v-loading="loading" :data="tastList">
			<!--      <el-table-column label="流程ID" align="center" prop="id"/>-->
			<el-table-column label="订单编号" align="center" prop="ddbh" />
			<el-table-column label="流程名称" align="center" prop="instanceName" />
			<el-table-column label="任务节点名称" align="center" prop="name" />
			<el-table-column label="提报人" align="center" prop="createdName" />
			<el-table-column label="任务创建时间" align="center" prop="createdDate" />
			<el-table-column label="下单时间" align="center" prop="createdDate" />
			<el-table-column label="预占结束时间" align="center" prop="reserveEndTime" />
			<el-table-column label="预占库存倒计时" align="center" prop="createdDate" :formatter="stateFormat" />
			<el-table-column label="总价" align="center" prop="totalPrice" />
			<el-table-column label="供应商" align="center" prop="suppliers" />
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button size="mini" type="text" icon="el-icon-edit" @click="examineAndApprove (scope.row)">审批
					</el-button>
					<!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="lookDetail (scope.row)"
            v-hasPermi="['workflow:leave:edit']"
          >查看详情
          </el-button> -->


				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" />

		<!-- 审批对话框 -->
		<el-dialog :title="title" :visible.sync="open" v-if="open" width="500px" append-to-body>
			<leaveHistoryForm :businessKey="businessKey" v-if="'leave'==definitionKey" />

			<el-form :model="form" ref="form" label-width="100px" class="demo-dynamic">
				<el-form-item v-for="(domain, index) in form.formData" :label="domain.controlLable" :key="index">
					<el-radio-group v-model="domain.controlValue" v-if="'radio'==domain.controlType">
						<el-radio v-for="(defaults,indexd) in domain.controlDefault.split('--__--')" :label=indexd
							:key="indexd">{{defaults}}

						</el-radio>

					</el-radio-group>
					<el-input type="textarea" v-model="domain.controlValue" v-if="'textarea'==domain.controlType">
					</el-input>
				</el-form-item>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		listTask,
		formDataShow,
		formDataSave
	} from "@/api/activiti/task";
	import leaveHistoryForm from "@/views/activiti/workflow/leave/leaveHistoryForm";


	export default {
		name: "Leave",
		components: {
			leaveHistoryForm
		},
		data() {
			return {
				id: '',
				definitionKey: '',
				businessKey: '',
				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 请假表格数据
				tastList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				// 表单参数
				form: {
					formData: []
				},
				// 表单校验
				rules: {}
			};
		},
		created() {
			this.getList();
		},
		methods: {
			//倒计时
			stateFormat(row, column) {
				if (!row.reserveEndTime) {
					return;
				}
				var date1 = new Date(row.reserveEndTime).getTime(); //开始时间
				var date2 = new Date().getTime(); //结束时间
				// <span>{{Date.parse(parseInt(scope.row.createdDate)/1000)}} -- {{7*24*60*60*1000}} ++ {{new Date().getTime()}}</span>
				const date3 = date1 - date2 //时间差的毫秒数
				//计算出相差天数
				const days = Math.floor(date3 / (24 * 3600 * 1000))
				//计算出小时数
				const leave1 = date3 % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
				const hours = Math.floor(leave1 / (3600 * 1000))
				//计算相差分钟数
				const leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
				const minutes = Math.floor(leave2 / (60 * 1000))
				//计算相差秒数
				const leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
				const seconds = Math.round(leave3 / 1000)
				let diffValue

				if (days < 0) {
					return "审批超时"
				} else {
					if (days > 1) {
						diffValue = days + "天" + hours + "小时 "
					} else {
						diffValue = hours + "小时" + minutes + "分钟"
					}
					return diffValue
				}
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},

			lookDetail(row) {
				localStorage.setItem("type", 1);
				this.$router.push({
					path: "/activiti?type=1&deploymentId=" + row.id
				})
			},
			/** 查询请假列表 */
			getList() {
				this.loading = true;
				var that = this;
				setTimeout(function() {
					listTask(that.queryParams).then(response => {
						that.tastList = response.rows;
						that.total = response.total;
						that.loading = false;
					});
				}, 1000);
			},

			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.definitionKey = '',
					this.businessKey = '',
					this.form = {
						formData: [],
					};
				this.resetForm("form");
			},

			/** 审批按钮操作 */
			examineAndApprove(row) {
				//     this.reset();
				//     this.definitionKey = row.definitionKey;
				//       this.businessKey = row.businessKey;
				//      this.id=row.id;
				//     formDataShow(row.id).then(response => {
				//       // FormProperty_3qipis2--__!!radio--__!!审批意见--__!!i--__!!同意--__--不同意
				//       // FormProperty_0lffpcm--__!!textarea--__!!批注--__!!f--__!!null
				//       var datas = response;
				//       var formData = [];
				// console.log(response);
				// console.log(datas);
				// console.log(datas.length);
				//       for (var i = 0; i < datas.length; i++) {
				//         var strings = datas[i].split('--__!!')
				//         var controlValue = null
				//         var controlDefault = null
				//         switch (strings[1]) {
				//           case 'radio':
				//             controlValue = 0;
				//             controlDefault = strings[4]
				//             break;
				//           // default:
				//         }
				//         formData.push({
				//           controlId: strings[0],
				//           controlType: strings[1],
				//           controlLable: strings[2],
				//           controlIsParam: strings[3],
				//           controlValue: controlValue,
				//           controlDefault: controlDefault
				//         })
				//       }
				// console.log(111111);
				//       this.form.formData = formData;
				//       this.open = true;
				//       this.title = "审批";
				//     });

				this.$router.push({
					path: "/activitiorder?id=" + row.ddbh + "&taskId=" + row.id + "&definitionKey=" + row
						.definitionKey + "&businessKey=" + row.businessKey + "&type="
				})
			},
			/** 提交按钮 */
			submitForm() {
				formDataSave(this.id, this.form.formData).then(response => {
					this.msgSuccess("审批成功");
					this.open = false;
					this.getList();
				});
			},
		}
	};
</script>
